//JS选择器：标签选择器，id选择器，类class选择器，后代选择器

//1.标签选择器
var ele1 = document.querySelector("strong");
console.log(ele1)
//2.id选择器
var ele2 = document.querySelector("#s1");
console.log(ele2)
//2.1 innerHtml:元素内部的所有的子html内容（所有的文字+标签）
console.log("-----------ele2.innerHTML----------------")
console.log(ele2.innerHTML)
//2.2 innerText：元素内部的所有的文本内容（所有的文字）
console.log("-----------ele2.innerText----------------")
console.log(ele2.innerText)

//获得d22的内容
var ele5 = document.querySelector(".d22")
console.log("-----------ele5.innerHTML----------------")
console.log(ele5.innerHTML)
console.log("-----------ele5.innerText----------------")
console.log(ele5.innerText)

console.log("-----------ele6----------------")
var ele6 = document.querySelector(".s2 div")
console.log(ele6.innerHTML)

var ele7 = document.querySelector(".s2 p")
console.log(ele7.innerHTML)

//3.类选择器
var ele3 = document.querySelectorAll(".d1");
ele3.forEach(element => {
    console.log(element)
});
//4.后代选择器
var ele4= document.querySelector(".d22 .s22")
console.log(ele4)

//5.获得与修改
//获得元素的属性值
var imgEle = document.querySelector(".myimg")
console.log(imgEle.src)

var numele = document.querySelector(".pro-number")
console.log(numele.value)
//将value默认值改为4
numele.value=4

//点击按钮修改img.src = "新图片的url"
// document.querySelector(".changeImgBtn").onclick=changeImg
// function changeImg(){
//     document.querySelector(".myimg").src="images/like_over.png"
// }

//要做的点击换下一张图片
// document.querySelector(".changeImgBtn").onclick=changeImg
// var arr=[]
// arr[0]="images/like_over.png"
// arr[1]="images/cart.svg"

// function changeImg(){
//     for(var i=0;;i++){
//         if(i<arr.length){

//            document.querySelector(".myimg").src=arr[i] 
//         }else{
//             i=0
//         }
//     }
// }
//获得ul
var ulEle = document.querySelector(".nav")
//获得所有子元素
var liArray =  ulEle.children;
console.log(liArray)
//获得第一个子元素
var first = ulEle.firstElementChild
console.log(first)
var firsta = ulEle.firstChild
console.log(firsta)
//获得第二个子元素
var secondLi = liArray[1]
console.log(secondLi)
//站在第二个元素secondLi位置上，获得他的前一个元素，下一个元素
console.log("----------")
var secondBefore = secondLi.previousElementSibling
console.log(secondBefore)
var secondNext = secondLi.nextElementSibling
console.log(secondNext)
//获得最后一个个子元素
var lastLi = ulEle.lastElementChild
console.log(lastLi)

//点击日期选择在获得值
document.querySelector(".mydate").onchange=function(){
    var mydate=document.querySelector(".mydate").value
    console.log(mydate)
}


